<!--
 * @Descripttion:
 * @Author: wult
 * @Date: 2021-04-06 16:16:22
 * @LastEditTime: 2021-04-08 11:07:20
-->
<template>
  <div class="body-right">
    <img
      @load="onload"
      @error="onError"
      class="centerimg mp3view"
      v-if="['jpg', 'png', 'jpeg'].indexOf(currentFile.ext) !== -1"
      :src="baseApi + currentFile.filePath"
      alt=""
    />
    <!-- <div id="mse"></div> -->

    <!-- <div v-if="['mp4', 'mp3'].includes(currentFile.ext)" id="mse"></div> -->
    <video
      @loadstart="onload"
      @error="onError"
      v-if="currentFile.ext === 'mp4'"
      controls
      controlsList="nodownload"
      class="mp3view"
      :src="baseApi + currentFile.filePath"
    ></video>
    <video
      @loadstart="onload"
      @error="onError"
      v-if="currentFile.ext === 'mp3'"
      controls
      controlsList="nodownload"
      name="media"
      class="mp3view"
    >
      <source :src="baseApi + currentFile.filePath" type="audio/mpeg" />
    </video>

    <iframe
      @load="onload"
      @error="onError"
      allowfullscreen="true"
      mozallowfullscreen="true"
      webkitallowfullscreen="true"
      v-if="
        ['pdf', 'ppt', 'pptx', 'docx', 'doc'].indexOf(currentFile.ext) !== -1
      "
      :src="`${web365}&sn=${currentFile.PAGEINDEX ? currentFile.PAGEINDEX : 0}&furl=${baseApi + currentFile.filePath}`"
      frameborder="0"
      style="width: 100%; height: calc(100vh - 60px)"
    />
    <iframe
      @load="onload"
      @error="onError"
      v-if="['zip', 'rar'].indexOf(currentFile.ext) !== -1"
      :src="`${web365}&sn=${currentFile.PAGEINDEX ? currentFile.PAGEINDEX : 0}&furl=${baseApi + currentFile.filePath}`"
      frameborder="0"
      style="width: 100%; height: calc(100vh - 60px)"
    ></iframe>
    <iframe
      @load="onload"
      @error="onError"
      v-if="currentFile.filePath?.includes('index.html')"
      :src="baseApi + currentFile.filePath"
      frameborder="0"
      style="width: 100%; height: calc(100vh - 60px)"
    ></iframe>
  </div>
</template>
<script lang="js">
import $ from '$'
	export default {
		name: "pageView",
		props: {
			// lessonInfo: {
			// 	type: Object,
			// 	default: null
			// },
			courseIndexDto: {
				type: Array
			},
			currentFile: {
				type: Object,
				default: () => ({})
			},
		},
		data() {
		    return {
			  baseApi: import.meta.env.VITE_APP_BASE_URL,
			  web365: $.utils.generatBasePath(),
			//   tab:[{label: '教师教案', value: 2}, {label: '教师说课视频', value: 1}],
			//   tabIndex:  1
		  }
		},
    mounted() {
      window.addEventListener('message', function(event) {
        //  if(event.origin !== 'http://davidwalsh.name') return;
        // console.log('index:  ' + event.data, typeof(event.data));
        if(typeof(event.data) !== 'string') {
          localStorage.setItem("PAGEINDEX", event.data);
        } else {
          localStorage.setItem("PAGEINDEX", event.data && JSON.parse(event.data).page && JSON.parse(event.data).page.idx);
        }
      }, false)
    },
    methods: {
      onload() {
        this.$emit('onload')
      },
      onError() {
        this.$emit('onload')
      }
    }

  }
</script>
<style scoped lang="scss">
.body-right {
  // height: 840px;
  height: calc(100vh - 60px);
  .mp3view {
    width: 100%;
    height: calc(100vh - 60px);
    // height: 675px;
  }
}
</style>
